<!--
 * @Author: 赵京涛 z19472333952022@163.com
 * @Date: 2024-10-09 12:50:06
 * @LastEditors: 赵京涛 z19472333952022@163.com
 * @LastEditTime: 2024-10-09 12:50:06
 * @projectName: HeBeiHaiYangData
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki
-->
<template>
  <div class="wh100">
    <el-form ref="elForm" :model="form" size="small" label-width="70px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="用户名称">
            <el-input
              v-model="form.userName"
              placeholder="请输入用户名称"
              clearable
              :style="{ width: '100%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户账号">
            <el-input
              v-model="form.userId"
              placeholder="请输入用户账号"
              clearable
              :style="{ width: '100%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户类型">
            <el-select
              v-model="form.userTypeId"
              placeholder="请选择用户类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in userTypeOptions"
                :key="item.userTypeId"
                :label="item['userTypeName']"
                :value="item.userTypeId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户角色">
            <el-select
              v-model="form.roleId"
              placeholder="请选择用户角色"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in roleOptions"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="text-right pt-1">
          <lv-button
            type="p"
            size="small"
            label="查询"
            icon="el-icon-search"
            @click="handleSearch"
          />
          <lv-button
            type="s"
            size="small"
            label="新增用户"
            icon="el-icon-plus"
            @click="addUserDialog"
          />
        </el-col>
      </el-row>
    </el-form>
    <p class="tip"><span>共查询到{{ total }}条数据</span></p>
    <div class="flex-1 tableBox">
      <el-table :data="tabList" border stripe height="calc(100%)">
        <el-table-column label="序号" width="80px" align="center">
          <template v-slot:default="scope">
            <span>{{ (form.pageNum - 1) * form.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户名称" prop="userName" show-overflow-tooltip />
        <el-table-column align="center" label="账号" prop="userId" show-overflow-tooltip />
        <el-table-column align="center" label="用户类型" prop="userTypeName" show-overflow-tooltip />
        <el-table-column align="center" label="用户角色" prop="roleName" show-overflow-tooltip />
        <el-table-column align="center" label="行政区划" prop="districtFullName" show-overflow-tooltip />
        <el-table-column align="center" label="所属部门" prop="departmentFullName" show-overflow-tooltip />
        <el-table-column align="center" label="上次登录时间" prop="lastLoginDate" show-overflow-tooltip />
        <el-table-column align="center" label="操作" width="220">
          <template v-slot:default="scope">
            <lv-button
              type="p"
              :plain="true"
              size="mini"
              icon="el-icon-edit"
              @click="getUserInfo(scope.row)"
            />
            <lv-button
              type="w"
              :plain="true"
              size="mini"
              icon="el-icon-lock"
              msg="确认重置密码吗?"
              @click="handleReset(scope.row)"
            />
            <lv-button
              type="d"
              :plain="true"
              size="mini"
              icon="el-icon-delete"
              msg="此操作不可逆，是否确认删除此数据?"
              @click="handleDelete(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      :current-page="form.pageNum"
      :total="total"
      :page-size="form.pageSize"
      @changeData="getUserList"
    />
  </div>
</template>
<script>
import refMixin from '@/layout/mixin/refHandler'
import LvButton from '@/components/lvButton/index.vue'
import { filterEmpty, successMessage } from '@/hooks'
import { deleteUser, getUserList, resetPassword } from '@/api/user'

export default {
  components: { LvButton },
  id: 'userManagement',
  inject: ['layout'],
  mixins: [refMixin],
  data() {
    return {
      total: 0,
      form: {
        userName: '',
        userId: '',
        userTypeId: '',
        roleId: '',
        pageNum: 1,
        pageSize: 10
      },
      tabList: []
    }
  },
  created() {
    this.$nextTick(async() => {
      await this.getUserList()
    })
  },
  methods: {
    /**
     * 获取用户列表
     * @returns {Promise<void>}
     */
    async getUserList() {
      try {
        this.layout.showAreaLoading(['.tableBox'])
        const { status, data } = await getUserList(filterEmpty(this.form))
        if (status === 0 && data) {
          this.tabList = data.list
          this.total = data.total
          this.form.pageNum = data.pageNum
          this.form.pageSize = data.pageSize
        }
        this.layout.hideAreaLoading(['.tableBox'])
      } catch (err) {
        console.log(err)
      }
    },
    /**
     * 查询
     */
    handleSearch() {
      this.form.pageNum = 1
      this.getUserList()
    },
    /**
     * 新增用户
     */
    addUserDialog() {

    },
    /**
     * 获取用户信息（编辑回填）
     * @param row
     * @returns {Promise<void>}
     */
    async getUserInfo(row) {},
    /**
     * 重置密码
     * @param row
     * @returns {Promise<void>}
     */
    async handleReset(row) {
      try {
        const { status, msg } = await resetPassword({ userId: row.userId })
        if (status === 0) {
          successMessage(msg)
        }
      } catch (err) {
        console.log(err)
      }
    },
    /**
     * 删除用户
     * @param row
     */
    async handleDelete(row) {
      try {
        const { status, msg } = await deleteUser({ userId: row.userId })
        if (status === 0) {
          successMessage(msg)
          await this.getUserList()
        }
      } catch (err) {
        console.log(err)
      }
    },
  }
}
</script>
